<!--  -->
<template>
  <div class="card">
    <h2>{{ title }}</h2>
    <div class="card-body">
      <a href="" class="active" v-for="category in categoryData" :key="category.id">{{ category.name }}</a>
    </div>
  </div>
</template>

<script>
export default {
  name: "CardHorizontal",
  data() {
    return {};
  },
  props:["categoryData","title"],
  components: {},

  computed: {},

  mounted(){},

  created(){
    console.log("title:"+this.title)
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
@import "@/assets/scss/theme.scss";
.card {
  margin-left: 20px;
  margin-bottom: 40px;
  font-size: 14px;
  -moz-user-select: none;
  -webkit-user-select: none;
}
.card > h2 {
  background-color: #c6cbce;
  line-height: 40px;
  padding-left: 20px;
  border-radius: 5px;
  text-align: left;
}
.card-body {
  background-color: $main-background-color;
  line-height: 40px;
  padding-left: 20px;
  text-align: left;
}
.card-body > a {
  display: inline-block;
  margin-right: 10%;
}
</style>